// 封装发送筛选请求的对象
let query = {
  type: 1,
  page: 1,
  limit: 10
}

//获取文字类型数据
const list1 = document.querySelector('#list1')
const list2 = document.querySelector('#list2')
reader()
async function reader() {
  query.type = 1
  const { data: { data: { data: data1, count: count1 } } } = await axios.get('/ydd_link/list', { params: query })
  // console.log(data,count);
  renderPage(count1, 'page-box1')
  list1.innerHTML = data1.map(({ id, title, url, des }, index) => {
    return `<tr>
      <td>${index + 1}</td>
      <td>${title}</td>
      <td>${des}</td>
      <td>文字类型</td>
      <td>${url}</td>
      <td>
        <button type="button" class="layui-btn layui-btn-xs btn_edit iconfont icon-xiugai edit" data-id=${id}></button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete iconfont icon-shanchu del" data-id=${id}></button>
      </td>
    </tr>`}).join('')

  query.type = 2
  const { data: { data: { data, count } } } = await axios.get('/ydd_link/list', { params: query })
  // console.log(data,count);
  renderPage(count, 'page-box2')
  list2.innerHTML = data.map(({ id, img, url, des }, index) => {
    return `<tr>
      <td>${index + 1}</td>
      <td>${des}</td>
      <td><img src=http://124.223.14.236:8060/${img} alt=""></td>
      <td>图片类型</td>
      <td>${url}</td>
      <td>
        <button type="button" class="layui-btn layui-btn-xs btn_edit iconfont icon-xiugai edit" data-id=${id}></button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete iconfont icon-shanchu del" data-id=${id}></button>
      </td>
    </tr>`}).join('')
}


// 修改模态框
const reviseForm = `
<form id="reviseForm" class="layui-form">
<!-- id隐藏行  -->
<div class="layui-form-item textarea" style="display: none;">
  <label class="layui-form-label">*标题</label>
  <div class="layui-input-block">
    <input type="text" name="id" placeholder="请输入标题名称" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">*链接类型</label>
  <div class="layui-input-block">
  <select class="select" name="type" style="display: block;">
  <option value="">请选择</option>
  <option value="1">文字类型</option>
  <option value="2">图片类型</option>
</select>
  </div>
</div>
<!-- 文字标题行 分类别名  -->
<div class="layui-form-item textarea text" style="display: none;">
  <label class="layui-form-label">*标题</label>
  <div class="layui-input-block">
    <input type="text" name="title" placeholder="请输入标题名称" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item textarea">
  <label class="layui-form-label">*链接地址</label>
  <div class="layui-input-block">
    <input type="text" name="url" required lay-verify="required" placeholder="请输入链接地址名称" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 分类别名  -->
<div class="layui-form-item textarea">
  <label class="layui-form-label">*链接描述</label>
  <div class="layui-input-block">
  <textarea name="des" placeholder="请输入链接描述" lay-verify="required" class="layui-textarea"></textarea>
  </div>
</div>
<!-- 第四行 分类别名  -->
<div class="layui-form-item addImg" style="display: none;">
  <label class="layui-form-label">*链接图片</label>
  <div class="layui-input-block">
  <label id="files">点击上传</label>
  <input type="file" id="file" style="display: none;">
  </div>
  <div class="layui-input-block" id=seeImg>
  <img src="" alt="" id="advimgsrc">
  <a href="javaScript:;">查看详情</a>
  </div>
</div>
<!-- 第五行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block-end">
  <i class="layui-btn layui-btn-primary" id="cancel1">取消</i>
    <button class="layui-btn" lay-submit lay-filter="formDemo" id='enter'>确认</button>
  </div>
</div>
</form>
`

// 删除
let indexReviseForm
document.body.addEventListener('click', async function (e) {
  if (e.target.className === 'layui-btn layui-btn-danger layui-btn-xs btn_delete iconfont icon-shanchu del') {
    // console.log(55);
    const { id } = e.target.dataset
    // console.log(id);
    //!优化删除当页最后一个内容的bug
    if ($('.del').length === 1) query.page = query.page - 1
    if (query.page <= 1) query.page = 1

    const { data: { errno, errmsg } } = await axios.get(`/ydd_link/del?id=${id}`)
    // console.log(res);
    if (errno === 1000) return layer.msg(errmsg);
    layer.msg('删除成功');
    reader()

  }

  //点击修改弹框
  if (e.target.className === 'layui-btn layui-btn-xs btn_edit iconfont icon-xiugai edit') {
    // console.log(55);
    const { id } = e.target.dataset
    // console.log(id);
    indexReviseForm = layer.open({
      type: 1,
      title: ['客官要修改什么呢', 'font-size:22px;'],
      shade: 0.6, // 遮罩透明度
      content: reviseForm,
      area: ['800px', '500px']
    });
    //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
    const { data: { data } } = await axios.get(`/ydd_link/rowInfo?id=${id}`)
    // console.log(data);
    const names = document.querySelectorAll('#reviseForm [name]')
    // console.log(names);
    // 基本回显
    names.forEach(ele => {
      ele.value = data[ele.name]
    })
    // 下拉框回显
    document.querySelector('.select').value = data.type
    // 处理是文字还是图片
    showORhide()
    // 图片回显
    document.querySelector('#advimgsrc').src = `http://124.223.14.236:8060/${data.img}`
  }
})

// 点击查看大图

$('body').on('click', '#seeImg', function () {
  const advimgsrc = document.querySelector('#advimgsrc')
  // console.log(advimgsrc);
  let img = new Image();
  img.src = advimgsrc.src;
  let imgHtml = "<img src='" + advimgsrc.src + "' width='100%' height='100%'/>";
  //弹出层
  layer.open({
    type: 1,
    shade: 0.4,
    offset: 'auto',
    area: [800 + 'px'],
    shadeClose: true,
    scrollbar: false,
    title: false, //不显示标题  
    content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
    cancel: function () {
      //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
    }
  });
})

$('body').on('submit', '#reviseForm', async function (e) {
  //点击修改发送请求
  e.preventDefault()
  // 判断是否选择
  const select = document.querySelector('.select')
  if (select.value !== '1' && select.value !== '2') return layer.msg('请选择');
  // 收集数据
  const fd2 = new FormData(e.target)
  if (select.value === '2') {
    // console.log(55);
    const files = document.querySelector('#file').files[0]
    // console.log(files);
    // if (!files) return layer.msg('图片未上传');
    // 把file图片文件转换成string字符串格式
    if (files) {
      const fd = new FormData()
      fd.append('file', files)
      const { data: { data: { savePath } } } = await axios.post('http://124.223.14.236:8060/admin/common/upload?type=images', fd, {
        headers: {
          'Content-Type': false,
        }
      })
      // 把图片添加进fd表单
      fd2.append('img', savePath)
    }
  }

  const res = await axios.post('/ydd_link/update', fd2)
  // console.log(res);
  reader()
  layer.close(indexReviseForm)
  layer.msg('修改成功');
})


// 添加模态框
const addForm = `
<form id="addForm" class="layui-form">
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
  <label class="layui-form-label">*链接类型</label>
  <div class="layui-input-block">
  <select class="select" name="type" style="display: block;">
  <option value="">请选择</option>
  <option value="1">文字类型</option>
  <option value="2">图片类型</option>
</select>
  </div>
</div>
<!-- 文字标题行 分类别名  -->
<div class="layui-form-item textarea text" style="display: none;">
  <label class="layui-form-label">*标题</label>
  <div class="layui-input-block">
    <input type="text" name="title" placeholder="请输入标题名称" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item textarea">
  <label class="layui-form-label">*链接地址</label>
  <div class="layui-input-block">
    <input type="text" name="url" required lay-verify="required" placeholder="请输入链接地址名称" autocomplete="off"
      class="layui-input">
  </div>
</div>
<!-- 第三行 分类别名  -->
<div class="layui-form-item textarea">
  <label class="layui-form-label">*链接描述</label>
  <div class="layui-input-block">
  <textarea name="des" placeholder="请输入链接描述" lay-verify="required" class="layui-textarea"></textarea>
  </div>
</div>
<!-- 第四行 分类别名  -->
<div class="layui-form-item addImg" style="display: none;">
  <label class="layui-form-label">*链接图片</label>
  <div class="layui-input-block">
  <label id="files">点击上传</label>
  <input type="file" id="file" style="display: none;">
  </div>
  <div class="layui-input-block" id="seeImg" style="display: none;">
  <img src="" alt="" id="advimgsrc">
  <a href="javaScript:;">查看详情</a>
  </div>
</div>
<!-- 第五行 按钮 -->
<div class="layui-form-item">
  <div class="layui-input-block-end">
  <i class="layui-btn layui-btn-primary" id="cancel2">取消</i>
    <button class="layui-btn" lay-submit lay-filter="formDemo" id='enter'>确认</button>
  </div>
</div>
</form>
`



//点击添加弹框
let indexAddForm          //添加文章的弹出层的index
document.querySelector('#addTo').addEventListener('click', function () {
  indexAddForm = layer.open({
    type: 1,
    title: ['客官要添加什么呢', 'font-size:22px;'],
    shade: 0.6, // 遮罩透明度
    content: addForm,
    area: ['800px', '400px']
  });
  //拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
})

// 选择图片类型还是文字类型
document.body.addEventListener('change', function (e) {
  if (e.target.className === 'select') {
    // console.log(555)
    showORhide()
  }

  // 上传图片预览效果
  if (e.target.id === 'file') {
    // console.log(55);
    const files = document.querySelector('#file').files[0]
    // console.log(files);
    if (!files) return
    $('#seeImg').show()
    const imgUrl = URL.createObjectURL(files)
    document.querySelector('#advimgsrc').src = imgUrl
  }
})

// 封装图片类型还是文字类型隐藏显示函数
function showORhide() {
  const select = document.querySelector('.select')
  if (select.value === '1') {
    // console.log(555);
    $('.text').show()
    $('.addImg').hide()
    $('#seeImg').hide()

  } else if (select.value === '2') {
    $('.text').hide()
    $('.addImg').show()
  } else {
    $('.text').hide()
    $('.addImg').hide()
    $('#seeImg').hide()
  }
}
// 模仿点击文件框
$('body').on('click', '#files', function () {
  $('#file').click()
})




// 添加
// const formObj = document.querySelector('#addForm')
document.body.addEventListener('submit', async function (e) {
  // 点击添加发送请求
  if (e.target.id === 'addForm') {
    e.preventDefault()
    const select = document.querySelector('.select')
    // 判断是否选择
    if (select.value !== '1' && select.value !== '2') return layer.msg('请选择');
    // 收集数据
    const fd2 = new FormData(e.target)
    const files = document.querySelector('#file').files[0]
    if (select.value === '2') {
      // console.log(55);
      // console.log(files);
      if (!files) return layer.msg('图片未上传');
      // 把file图片文件转换成string字符串格式
      const fd = new FormData()
      fd.append('file', files)
      const { data: { data: { savePath } } } = await axios.post('http://124.223.14.236:8060/admin/common/upload?type=images', fd, {
        headers: {
          'Content-Type': false,
        }
      })
      // 把图片添加进fd表单
      fd2.append('img', savePath)
    }

    // console.log(savePath);
    // console.log(data);
    const res = await axios.post('/ydd_link/add', fd2)

    // console.log(res);
    reader()
    layer.close(indexAddForm)
    layer.msg('添加成功');
  }


})


// 分页
function renderPage(total, ele) {
  layui.use('laypage', function () {
    let laypage = layui.laypage;

    //执行一个laypage实例
    laypage.render({
      elem: ele //注意，这里的 test1 是 ID，不用加 # 号
      , count: total //数据总数，从服务端得到
      , limit: query.limit
      , curr: query.page
      , limits: [2, 3, 5, 10, 20]
      , layout: ['count', 'limit', 'prev', 'page', 'next', 'skip']
      , jump: function (obj, first) {
        // jump的触发机制：
        // 1、分页渲染会触发回调函数
        // 2、当分页切换的时候也会触发
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); //得到每页显示的条数
        query.page = obj.curr
        query.limit = obj.limit
        //首次不执行
        if (!first) {
          //do something
          reader()
        }
      }
    });
  });

}


// 取消
document.body.addEventListener('click', function (e) {
  // 取消修改模态框
  if (e.target.id === 'cancel2') {
    // console.log(55);
    layer.close(indexAddForm)
    // formObj.reset()
  }
  // 取消添加模态框
  if (e.target.id === 'cancel1') {
    // console.log(55);
    layer.close(indexReviseForm)
    // formObj.reset()
  }

})

